<template>

  <div class="container">
    <div class="operation-banner">
      <!-- 本月销售额 -->
      <div class="operation allnum">
        <div class="allnumclass">
          <p class="money">
            <span class="left">月销售额</span>
            <span class="particulars" @click="particulars()">. . .</span>
          </p>
          <p class="num" v-if="mounthData.amount ==null">0</p>
          <p class="num" v-else-if='mounthData.amount  !=null'>¥<count-to :start-val="0" :end-val="mounthData.amount " :duration="2600" /></p>
          <p class="leftallnumclass">
            <span style="margin-top:20px;">月销售量</span>
          </p>
          <p class="num1" v-if="mounthData.count  ==null">0</p>
          <p class="num1" v-else-if='mounthData.count  !=null'>¥<count-to :start-val="0" :end-val="mounthData.count " :duration="2600" /></p>

          <p class="money2">
            <span style="font-size:16px">
              日均销售量额
              <span v-if="mounthData.average  ==null">0</span>
              <span v-else-if='mounthData.average  !=null'>¥ <count-to :start-val="0" :end-val="mounthData.average " :duration="2600" /></span>
            </span>
            <span
              v-if="mounthData.ringRatio ==null"
              style="color:#51c811;font-size:16px"
            >周环比 0%</span>
            <span
            v-else-if='mounthData.ringRatio  !=null'
              style="color:red;font-size:16px"
            >周环比<count-to :start-val="0" :end-val="mounthData.ringRatio " :duration="2600" />%</span>
          </p>
        </div>
      </div>
      <!-- 本周销售额 -->
      <div class="operation Weeklysales">
        <div class="allnumclass">
          <p class="money">
            <span class="left">本周销售额</span>
            <span class="particulars" @click="particulars()">. . .</span>
          </p>

          <p class="num" v-if="weekData.amount ==null">0</p>
          <p class="num"  v-else-if='weekData.amount  !=null'>¥<count-to :start-val="0" :end-val="weekData.amount " :duration="2600" /></p>
          <p class="leftallnumclass">
            <span>本周销售量</span>
          </p>

          <p class="num1" v-if="weekData.count  ==null">0</p>
          <p class="num1"  v-else-if='weekData.count  !=null'>¥<count-to :start-val="0" :end-val="weekData.count " :duration="2600" /></p>

          <p class="money2">
            <span style="font-size:16px;color: rgba(0, 0, 0, 0.65)">
              客单价
              <span v-if="weekData.average  ==null">0</span>
              <span  v-else-if='weekData.average  !=null'>¥ <count-to :start-val="0" :end-val="weekData.average " :duration="2600" /></span>
            </span>
            <span
              v-if="weekData.ringRatio==null"
              style="color:#51c811;font-size:16px"
            >月环比 0%</span>
            <span
               v-else-if='weekData.ringRatio  !=null'
              style="color:red;font-size:16px"
            >月环比<count-to :start-val="0" :end-val="weekData.ringRatio " :duration="2600" />%</span>
          </p>
        </div>
      </div>
      <!-- 今日销售额 -->
      <div class="operation todaynum">
        <div class="allnumclass">
          <p class="money">
            <span class="left">今日销售额</span>
            <span class="particulars" @click="particulars()">. . .</span>
          </p>

          <p class="num" v-if="todyData.orderAmount==null">0</p>
          <p class="num"   v-else-if='todyData.orderAmount !=null'>¥<count-to :start-val="0" :end-val="todyData.orderAmount " :duration="2600" /></p>
          <p class="leftallnumclass">
            <span class="left">今日销售次数</span>
          </p>

          <p class="num1" v-if="todyData.orderQuantity   ==null">0</p>
          <p class="num1"    v-else-if='todyData.orderQuantity  !=null'>¥<count-to :start-val="0" :end-val="todyData.orderQuantity " :duration="2600" /></p>
          <p class="money2">
            <span style="font-size:16px">
              客单价
              <span v-if="todyData.perTicketSales ==null">0</span>
              <span    v-else-if='todyData.perTicketSales  !=null'>¥<count-to :start-val="0" :end-val="todyData.perTicketSales " :duration="2600" /></span>
            </span>
            <span
              v-if="todyData.annularRatio==null"
              style="color:#51c811;font-size:16px"
            >日环比 0%</span>
            <span    v-else-if='todyData.annularRatio  !=null'
              style="color:red;font-size:16px"
            >日环比 <count-to :start-val="0" :end-val="todyData.annularRatio " :duration="2600" />%</span>
          </p>
        </div>
      </div>
      <!-- 机器数量 -->
      <div class="operation machinenum">
        <div class="allnumclass">
          <p class="money">
            <span class="left">机器数量</span>
            <span class="particulars" @click="particulars()">. . .</span>
          </p>

          <p class="num" v-if="machine.amount==null">0</p>
          <p class="num"  v-else-if='machine.amount  !=null'><count-to :start-val="0" :end-val="machine.amount " :duration="2600" /></p>
          <p class="leftallnumclass">
            <span>本周新增数量</span>
          </p>

          <p class="num1" v-if="machine.count ==null">0</p>
          <p class="num1"  v-else-if='machine.count  !=null'>¥<count-to :start-val="0" :end-val="machine.count " :duration="2600" /></p>
          <p class="money2">
            <span
              v-if="machine.ringRatio==null"
              style="color:#51c811;font-size:16px"
            >周同比 0%</span>
            <span
             v-else-if='machine.ringRatio  !=null'
              style="color:red;font-size:16px"
            >周同比 <count-to :start-val="0" :end-val="machine.ringRatio " :duration="2600" />%</span>
          </p>
        </div>
      </div>
    </div>
    <!-- 今日的销售额趋势曲线图 -->
    <div class="operation-echart">
      <div class="title1">
        <h2>今日的销售额趋势</h2>
          <div class="top-right">
            <!-- 日期选择 -->
                <div class="block">  
              <el-date-picker
                 @change="TimetoChange"
                v-model="orderTime"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="~"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
               >
              </el-date-picker>
            </div>
            <!-- 时间选择 -->
                <div class="seleclist" >
                  <span @click="numtime(1)" :class="istindex==1?'active':''">今日</span>
                  <span @click="numtime(7)" :class="istindex==7?'active':''">最近7天</span>
                  <span @click="numtime(30)" :class="istindex==30?'active':''">最近30天</span>
                </div>
            </div>
      </div>

      <div class="operation-bottom">
        <!-- 图一 曲线图  -->
        <div class="echarts-left">
          <div id="myChart" :style="{width: '100%', height: '100%'}" ref="myEchart"></div>
        </div>
        <!-- 图二 环形图  -->
        <div class="echarts-right">
          <div id="eCharts" :style="{width: '100%', height: '100%'}" ref="eChart"></div>
        </div>
      </div>
    </div>
<!-- 商品机器的销售情况 -->
    <div class="title">
      <h2>今日排行榜</h2>
      <h2>今日销售额排名</h2>
       </div>
        <div class="main-list">

          <div class="main-listleft">
             <el-table
              :data="Shoppinglists.slice(0,5)"
              border
              style="width: 100%">
              <el-table-column
                label="排名"
                type="index"
                width="100">
              </el-table-column>
              <el-table-column
                prop="positionName"
                label="点位名称"
               >
              </el-table-column>
              <el-table-column
                prop="verdorId"
                label="机器编号"
                >
              </el-table-column>
              <el-table-column
                prop="todayPayAmount"
                label="销售额">
              </el-table-column>
               <el-table-column
                prop="ringRatio"
                label="日环比">
              </el-table-column>
            </el-table>
      
          </div>
          <div class="main-listright">
               <el-table
              :data=" vendingmachine.slice(0,5)"
              border
              style="width: 100%;"
               header-align="center">
              <el-table-column
                label="排名"
                type="index"
                 width="100"
               >
              </el-table-column>
              <el-table-column
                prop="positionName"
                label="点位名称"
               >
              </el-table-column>
              <el-table-column
                prop="verdorId"
                label="机器编号"
                >
              </el-table-column>
              <el-table-column
                prop="todayPayAmount"
                label="销售额">
              </el-table-column>
               <el-table-column
                prop="ringRatio"
                label="日环比">
              </el-table-column>
            </el-table>
  
          </div>
        </div>
    <!-- 各组轮播图 -->
    <div class="mainecharts-list">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item,index) in getgrouplists" :key="index">
            <div class="mainechart">
              <div class="mainechart-left">
                <p class="p title1">{{item.groupName  }}</p>
                <p class="p title1">销售额</p>
                <p class="p title1">{{item.todayPayAmount }}</p>
              </div>
              <div class="mainechart-right">
                <el-progress type="circle" :percentage="item.ringRatio " class="circle"></el-progress>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>
    </div>
    <!-- 图三折线图 -->
    <div class="mainechart-bottom">
      <div id="myChart1" :style="{width: '100%', height: '100%'}" ref="myEchart1"></div>
    </div>
  </div>
</template>
<script>
import axios from "../../utils/fetch.js";
import Swiper from "swiper";
import Chart from "echarts";
const animationDuration = 6000

import CountTo from 'vue-count-to'


export default {
  data() {
    return {
      isShowIntroduction: true, //今日销售额
      todyData: [], //昨日销售额
      machine: [], //月销售额
      mounthData: [], //本周销售额
      weekData: [], //销售总额的时间
      recentDay: 7, // 销售图表的渲染
      Echartrendering: [],
      orderTime: [],
      endDateStr: new Date(), //时间间隔,
      interval:7, // 环形图的数据渲染
      vendingmachine: [],
      Shoppinglists: [], //商品TOP10
      getgrouplists:[],
      value: [], //
      temList: [], //组一组二
      option: {
        title: {},
        tooltip: {
          trigger: "axis"
        },
        color: ["#59abff", "#1aa260"],
        calculable: true,
        legend: {
          data: ["销售量", "销售额"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          feature: {}
        },
        xAxis: {
          type: "category",
          boundaryGap: false,

          data: [],
          animationDuration
        },
        yAxis: [
          {
            type: "value",
            // scale: true,
            name: "销售量",
            // max: 20,
            min: 0,
            boundaryGap: [0.2, 0.2]
          },
          {
            type: "value",
            // scale: true,
            name: "销售额",
            min: 0,
            boundaryGap: [0.2, 0.2]
          }
        ],
        series: [
          {
            name: "销售量",
            type: "line",
            smooth: true,
            yAxis: 1,
            // stack: "总量1",
            data: [],
            animationDuration
          },
          {
            name: "销售额",
            type: "line",
            yAxisIndex: 1,
            smooth: true,
            // stack: "总量2",
            data: [],
            animationDuration
          }
        ]

      } ,//图一折线图
      mounth:[],//月
      point:[],//点位费
      amount:[],//销售额
      istindex:0,//
      numll:'',
      vendorNumbers:0
    };
  },
    components: {
    CountTo
  },
  created() {
   this.gettodylist();//金日销售额
   this.getyestdrday();  //昨日销售额
   this.getmounthday(); //月销售额  
   this.weekDatas(); //本周销售额   
   this.gettodylistmachine();//机器排名
   this.getyestdrdaygetShop();  //商品排名
   this.getmounthdaygetgroup(); //组别排名  
   
    // setInterval(this.Vendingmachine(), 1000);
  },
  mounted() {  
    this.drawLine(); //图一折线图  
    this.echarts(); // 图二环形图的调用   
    this.chartfire();// 图三折线图的调用   
    new Swiper(".swiper-container", { //组的轮播
      slidesPerView: 5,
      spaceBetween: 50,
      pagination: {
      el: ".swiper-pagination",
      clickable: true
      },
          breakpoints: {
            1024: {
              slidesPerView: 4,
              spaceBetween: 40
            },
            768: {
              slidesPerView: 3,
              spaceBetween: 30
            },
            640: {
              slidesPerView: 2,
              spaceBetween: 20
            },
            320: {
              slidesPerView: 1,
              spaceBetween: 10
            }
          },
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev"
          }
 
    });
    //轮播箭头的显示或隐藏
    $(".swiper-container").mousemove(function(e) {
      $(".swiper-button-next ,.swiper-button-prev").show();
    });
    $(".swiper-container").mouseout(function(e) {
      $(".swiper-button-next ,.swiper-button-prev").hide();
    });
  },
  methods: {  
    particulars() { //详情页的跳转路径
      this.$router.push({ path: "/Sales" });
    }, 
    gettodylist() { // 金日销售额
      axios.Gettodylist().then(res => {
      this.todyData = res.data.data; 
      });

    },   
    getyestdrday() {//机器销售额
      axios.Weekdata().then(res => {  
      this.machine = res.data.data;       
      });
    },   
    getmounthday() { //月销售额
      axios.mounthlist().then(res => {
      this.mounthData = res.data.data;
      });
    },
     weekDatas() {  //本周销售额
      axios.weekSaledata().then(res => {
      this.weekData = res.data.data;
      });
    },
 //日期选择计算
   TimetoChange() {
    // 计算时间间隔
    var date = new Date(this.orderTime[0]); //开始时间
    console.log(date)
    var startData =date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
    //  "yyyy-MM-dd ");
    var dataold = new Date(this.orderTime[1]); //结束时间
    const endDateStr = date.getFullYear() +"-" +(dataold.getMonth() + 1) +"-" +dataold.getDate();
    var LentData = dataold.getTime() - date.getTime(); //时间差的毫秒数
      //计算出相差天数
    this.interval = Math.floor(LentData / (24 * 3600 * 1000));
      // //调用环形图
    this.recentDay = this.interval;
    this.echarts();
    this.drawLine();
  },
    //按日期选择
    numtime(value){
      this.istindex=value
      if(value==1){
        this.interval=1,
        this.recentDay=1,
        this.echarts();
        this.drawLine();
        } else if(value==7){
          this.interval=7,
          this.recentDay=7,
          this.echarts();
        this.drawLine();
        } else if(value==30){
          this.interval=30,
          this.recentDay=30,
          this.echarts();
        this.drawLine();
        }
    },
    drawLine(value1) { //图一折线图
      value1 = this.recentDay;
      axios.LineChart(value1).then(res => {
      this.Echartrendering = res.data.data;
      dayHours=[]
       this.option.xAxis.data=[]
       this.option.series[0].data=[]
       this.option.series[1].data=[]
      let dayHours = [0, 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17, 18,19,20,21,22, 23];
                 //开始处理从后台拉取的数据，填充没有的小时数
        for (var j = 0; j < dayHours.length; j++) {
          let exist = false;
          for (var i = 0; i < this.Echartrendering.length; i++) {
            if (dayHours[j] == this.Echartrendering[i].hours) {
              exist = true;
              break;
            }
          }
          if (!exist) {
            let hourSaleObject = {
              amount: 0,
              count: 0,
              hours: dayHours[j]
            };
            this.Echartrendering.splice(j, 0, hourSaleObject);
          }
        }
        for (var i = 0; i < this.Echartrendering.length; i++) {
          this.option.xAxis.data.push(this.Echartrendering[i].hours);
          this.option.series[0].data.push(this.Echartrendering[i].count);
          this.option.series[1].data.push(this.Echartrendering[i].amount);
        }
        this.chart = this.$echarts.init(this.$refs.myEchart);
        // 把配置和数据放这里
        this.chart.setOption(this.option, true);
        // 自适应
        window.addEventListener("resize", () => {
          this.chart.resize();
        });
      });
    },
    // 图二环形图的调用
    echarts(parmes) {
      //  //处理为yy-mm-dd
        var Data1=this.endDateStr.getFullYear() + '-' + (this.endDateStr.getMonth() + 1) + '-' + this.endDateStr.getDate() 
          parmes = {
            endDateStr:Data1,
            interval: this.interval
          };
          axios.PayMore(parmes).then(res => {
          const AnnularList = res.data.data;
          //清空数组
         this.value=[]
          this.vendorNumbers=0
          AnnularList.forEach(element => {
          this.value.push({
          value: element.amount,
          name: element.payMethod+'\r\r\r\r\r'+element.proportion+'\r\r\r\r\r'+element.amount 
           });
            this.vendorNumbers += element.amount
          });
              this.echartsone();
          });
    },
    //环形图的展示
    echartsone() {
      let eCharts = this.$echarts.init(document.getElementById("eCharts"));
      //支付比
      const sum=this.vendorNumbers
      var option1 = {
      
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        color: ["#5ebe67", "#3c90f7"],
        legend: {
        orient: "vertical",
        x: "left",
        },
        series: [
          {
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                position: 'center',
                 formatter:function (argument) {
                            var html;
                            html= "在职人数" + "\r\n\r\n" + sum + "人"
                           return html;              
                        },
             textStyle: {
                  fontSize: "20",
                  fontWeight: "bold"
                }
              },
         
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: this.value,
            animationDuration
          }
        ]
      };
     
      eCharts.setOption(option1, true);

      window.addEventListener("resize", () => {
        eCharts.resize();
      });
    },
    //售货机清单
    gettodylistmachine() {
      axios.Vendingmachine().then(res => {
      this.vendingmachine = res.data.data;
      });
    },
    //商品清单
    getyestdrdaygetShop() {
      axios.Shoppinglist().then(res => {
       this.Shoppinglists = res.data.data;
      });
    },
 //组位排行榜
   getmounthdaygetgroup() {
      axios.PointCharge().then(res => {
      this.getgrouplists = res.data.data;
      });
    },
    // //图三点位费折线图的调用
    chartfire(value1) {
      axios.GetYearList().then(res => {
          const echartlist = res.data.data;
        //清空数组
         this.mounth=[]
         this.amount=[]
         this.point=[]
          echartlist.forEach(element => {
            this.mounth.push(element.month )
            this.amount.push(element.amount )
            this.point.push(element.positionFee )
          });
          this.drawLine2()
      });
    },
    //     //图三点位费折线图的调用
    drawLine2() {
      let myChart1 = this.$echarts.init(document.getElementById("myChart1"));
      var option2 = {
        tooltip: {
          trigger: "axis"
        },
        color: ["#59abff", "#ff5733"],
        calculable: true,
        legend: {
          data: ["销售额", "点位费"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data:this.mounth,
          animationDuration
        },
        yAxis: {
            type: 'value'
        },
        series: [
          {
            name: "销售额",
            type: "line",
            smooth: true,
            data:  this.amount,
            animationDuration
          },
          {
            name: "点位费",
            type: "line",
            smooth: true,
            data: this.point,
            animationDuration
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart1.setOption(option2);
      window.addEventListener("resize", () => {
        myChart1.resize();
      });

    }
  }
};
</script>

<style >
@import "../../style/Operationa.css";

</style>
